@toolbar-btn-size: 24px;

.toolbar-btn {
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: @toolbar-btn-size;
    height: @toolbar-btn-size;
    padding: 0;

    font-size: var(--font-size-lg);
    color: rgb(var(--text-color));

    background-color: transparent;
    border: none;
    border-radius: var(--border-radius-base);
    outline: none;

    &:not([disabled]):hover {
        background-color: rgb(var(--grey-100));
    }

    &[disabled] {
        cursor: not-allowed;
        color: rgb(var(--grey-200));
    }

    &-active {
        background-color: rgb(var(--grey-100));
        &[disabled] {
            color: rgba(var(--text-color), 0.25);
        }
    }
}
